<template>
	<view class="bookshelf-container">
		<view class="header">
			<text class="title">我的书架</text>
			<view class="header-right">
				<text class="edit-btn" @click="toggleEdit">{{isEdit ? '完成' : '编辑'}}</text>
			</view>
		</view>
		
		<view class="empty-shelf" v-if="books.length === 0">
			<image class="empty-image" src="https://img.zcool.cn/community/01a9a35d11e8eda801211d53f91508.jpg@1280w_1l_2o_100sh.jpg" mode="aspectFit"></image>
			<text class="empty-text">书架空空如也，去书城看看吧</text>
			<button class="go-bookstore-btn" @click="goToBookstore">去书城</button>
		</view>
		
		<view class="book-grid" v-else>
			<view class="book-item" v-for="(book, index) in books" :key="index" @click="goToDetail(book)">
				<view class="book-cover-container">
					<image class="book-cover" :src="book.coverUrl" mode="aspectFill"></image>
					<view class="delete-icon" v-if="isEdit" @click.stop="removeBook(index)">
						<text class="delete-text">×</text>
					</view>
				</view>
				<text class="book-title">{{book.title}}</text>
				<text class="book-author">{{book.author}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				books: [
					{
						id: 1,
						title: '三体',
						author: '刘慈欣',
						coverUrl: 'https://img9.doubanio.com/view/subject/s/public/s2768378.jpg',
						description: '文化大革命如火如荼进行的同时，军方探寻外星文明的绝秘计划"红岸工程"取得了突破性进展。'
					},
					{
						id: 2,
						title: '红楼梦',
						author: '曹雪芹',
						coverUrl: 'https://img1.doubanio.com/view/subject/s/public/s1070959.jpg',
						description: '《红楼梦》是一部百科全书式的长篇小说，以贾、史、王、薛四大家族的兴衰为背景。'
					},
					{
						id: 4,
						title: '平凡的世界',
						author: '路遥',
						coverUrl: 'https://img9.doubanio.com/view/subject/s/public/s1144911.jpg',
						description: '这是一部全景式地表现中国当代城乡社会生活的长篇小说。'
					}
				]
			}
		},
		methods: {
			toggleEdit() {
				this.isEdit = !this.isEdit;
			},
			removeBook(index) {
				uni.showModal({
					title: '提示',
					content: '确定要从书架中移除这本书吗？',
					success: (res) => {
						if (res.confirm) {
							this.books.splice(index, 1);
							uni.showToast({
								title: '已从书架移除',
								icon: 'success'
							});
						}
					}
				});
			},
			goToDetail(book) {
				if (!this.isEdit) {
					uni.navigateTo({
						url: `/pages/detail/detail?id=${book.id}`
					});
				}
			},
			goToBookstore() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
	.bookshelf-container {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.edit-btn {
		font-size: 28rpx;
		color: #d81e06;
	}
	
	.empty-shelf {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.empty-image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 30rpx;
	}
	
	.go-bookstore-btn {
		background-color: #d81e06;
		color: #fff;
		font-size: 28rpx;
		padding: 10rpx 60rpx;
		border-radius: 40rpx;
	}
	
	.book-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 3.5%;
	}
	
	.book-item {
		width: 31%;
		margin-bottom: 30rpx;
	}
	
	.book-cover-container {
		position: relative;
		margin-bottom: 10rpx;
	}
	
	.book-cover {
		width: 100%;
		height: 320rpx;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	}
	
	.delete-icon {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: #ff4d4f;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.delete-text {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.book-title {
		font-size: 28rpx;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
	
	.book-author {
		font-size: 24rpx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
</style>